@extends('backend.layouts.base')
@section('title', '产品详情')
@section('content')
    <link rel="stylesheet" href="/static/css/backend/detail.css">
    <style>
        .vue-title {}
    </style>

    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-crumbs">
                <a @click="goParent()">产品管理</a> > 添加/编辑产品
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div class="vue-head">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content">基本信息</div>
                    </div>
                    <div class="vue-main-form">
                        <el-form-item label="分类" prop="cid">
                            <el-select v-model="form.cid" filterable clearable placeholder="请选择分类">
                                <el-option v-for="(item,index) in category_list" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产品名称" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="form.display_order" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="产品单位">
                            <el-input v-model="form.sku"></el-input>
                            <div class="tip">如：个/件/包</div>
                        </el-form-item>
                        <el-form-item label="产品属性">
                            <el-checkbox border size="mini" v-model.number="form.is_recommend" :true-label="1" :false-label="0">推荐</el-checkbox>
                            <el-checkbox border size="mini" v-model.number="form.is_new" :true-label="1" :false-label="0">新上</el-checkbox>
                            <el-checkbox border size="mini" v-model.number="form.is_hot" :true-label="1" :false-label="0">热卖</el-checkbox>
                        </el-form-item>
                        <el-form-item label="产品缩略图" prop="thumb">
                            <div class="upload-box" @click="openUpload('thumb')" v-if="!form.thumb">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('thumb')" class="upload-boxed" v-if="form.thumb">
                                <img :src="form.thumb" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="产品图片" prop="images" ref="images">
                            <div class="upload-boxed-list">
                                <div class="upload-boxed-list-a" v-for="(item,index) in form.images_url" :key="index">
                                    <img :src="item" alt="" style="width:150px;height:150px;border-radius: 5px;">
                                    <i class="el-icon-close" @click="clearImg('images','list',index)" title="点击清除图片"></i>
                                </div>
                                <div class="upload-box" @click="openListUpload('images')">
                                    <i class="el-icon-plus" style="font-size:32px"></i>
                                </div>
                            </div>
                            <div class="tip">提示: 640*640px或正方型图片</div>
                        </el-form-item>
                        {{--//--}}
                        <el-form-item label="产品现价" prop="price">
                            <el-input v-model="form.price" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="产品原价">
                            <el-input v-model="form.market_price" type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示价格">
                            <template>
                                <el-switch
                                    v-model="form.is_show_price"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </template>
                        </el-form-item>
                        <el-form-item label="价格位置显示文案" v-if="form.is_show_price == 0">
                            <el-input v-model="form.price_desc"></el-input>
                        </el-form-item>
                        <el-form-item label="是否上架">
                            <template>
                                <el-switch
                                    v-model="form.status"
                                    :active-value="1"
                                    :inactive-value="0"
                                >
                                </el-switch>
                            </template>
                        </el-form-item>
                        <el-form-item label="销售渠道" prop="">
                            <div style="width:90%;display:flex;font-weight:600;">
                                <div style="flex:1;margin:0 30px">销售渠道</div>
                                <div style="flex:1;">购买链接</div>
                            </div>
                            <div style="display:flex;border:1px solid #CCC"></div>
                            <div v-for="(item,key) in channel_list"
                                 :key="key"
                                 :label="item"
                                 style="width:90%;display:flex;margin:10px 30px">
                                <div style="flex:1;">
                                    <el-input v-model="item.name"></el-input>
                                </div>
                                <div style="flex:1;">
                                    <el-input v-model="item.url"></el-input>
                                </div>
                                <div style="flex:0.5">
                                    <i class="el-icon-delete" @click="delChannel(key)" style="font-size: 20px;color:#F56C6C"></i>
                                </div>
                            </div>
                            <div style="margin:0 30px">
                                <el-button size="mini" type="primary" icon="el-icon-plus" @click="addChannel">添加</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="其他属性" prop="">
                            <div style="width:90%;display:flex;font-weight:600;">
                                <div style="flex:1;margin:0 30px">属性名称</div>
                                <div style="flex:1;">属性值</div>
                            </div>
                            <div style="display:flex;border:1px solid #CCC"></div>
                            <div v-for="(item,key) in property_list"
                                 :key="key"
                                 :label="item"
                                 style="width:90%;display:flex;margin:10px 30px">
                                <div style="flex:1;">
                                    <el-input v-model="item.name"></el-input>
                                </div>
                                <div style="flex:1;">
                                    <el-input v-model="item.value"></el-input>
                                </div>
                                <div style="flex:0.5">
                                    <i class="el-icon-delete" @click="delProperty(key)" style="font-size: 20px;color:#F56C6C"></i>
                                </div>
                            </div>
                            <div style="margin:0 30px">
                                <el-button size="mini" type="primary" icon="el-icon-plus" @click="addProperty">添加</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="产品描述" prop="description">
                            <tinymceee v-model="form.description"></tinymceee>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
            <upload-img-list :upload-list-show="uploadListShow" :name="chooseImgListName" @replace="changeListProp" @sure="sureImgList"></upload-img-list>
        </div>

    </div>
    <script src="/static/libs/tinymce4.7.5/tinymce.min.js"></script>
    @include('backend.public.tinymceee')
    @include('backend.public.uploadImg')
    @include('backend.public.uploadImgList')
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    id:0,
                    form:{
                        cid:'',
                        name:'',
                        display_order:'',
                        description:'',
                        sku:'',
                        thumb:'',
                        images:'',
                        price:'',
                        price_desc:'',
                        market_price:0.00,
                        discription:'',
                        is_new:0,
                        is_hot:0,
                        is_recommend:0,
                        status:1,
                        is_show_price:1,
                    },
                    channel_list:[],
                    property_list:[],
                    category_list:[],
                    rules:{
                        cid:{ required: true, message: '请选择分类'},
                        name:{ required: true, message: '请输入名称'},
                        price:{ required: true, message: '请输入价格'},
                    },
                    submit_url:'',
                    uploadShow:false,
                    chooseImgName:'',
                    uploadListShow:false,
                    chooseImgListName:'',
                }
            },
            created() {

            },
            mounted() {
                this.id = getParam("id");
                if(this.id) {
                    this.is_edit = true;
                    this.submit_url = `{!! absolute_admin_url('content.product.edit') !!}`;
                }
                else {
                    this.submit_url = `{!! absolute_admin_url('content.product.create') !!}`;
                }
                this.getCategory();
                this.getData();
            },
            methods: {
                getCategory() {
                    let params = {};
                    params['type'] = 1;
                    this.$http.post('{!! absolute_admin_url('content.category.query') !!}',params).then(function(response) {
                        if (response.data.result) {
                            this.category_list = response.data.data;
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    }, function(response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    });
                },

                goParent() {
                    window.location.href = `{!! absolute_admin_url('content.product.index') !!}`;
                },
                getData() {
                    let json = {};
                    if(this.id){
                        json['id'] = this.id;
                    }
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! absolute_admin_url('content.product.getDetail') !!}',json).then(function (response) {
                            if (response.data.result){
                                if(response.data.data.info && response.data.data.info.id){
                                    this.form = {
                                        ...response.data.data.info,
                                    };
                                }
                                this.channel_list = response.data.data.channel_list?response.data.data.channel_list:[];
                                this.property_list = response.data.data.property_list?response.data.data.property_list:[];
                                console.log('this.form',this.form);
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },
                submitForm(formName) {
                    let that = this;
                    let json = {
                        cid:this.form.cid,
                        name:this.form.name,
                        display_order:this.form.display_order,
                        sku:this.form.sku,
                        images:this.form.images,
                        thumb:this.form.thumb,
                        is_new:this.form.is_new,
                        is_recommend:this.form.is_recommend,
                        is_hot:this.form.is_hot,
                        status:this.form.status,
                        price:this.form.price,
                        is_show_price:this.form.is_show_price,
                        market_price:this.form.market_price,
                        price_desc:this.form.price_desc,
                        description:this.form.description,
                    };
                    if(this.id) {
                        json.id = this.id;
                    }
                    if (this.channel_list) {
                        product_id:this.id;
                        name:this.channel_list.name;
                        url:this.channel_list.url;
                    }
                    if (this.property_list) {
                        product_id:this.id;
                        name:this.property_list.name;
                        value:this.property_list.value;
                    }
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post(this.submit_url,{params:json,channel:this.channel_list,property:this.property_list}).then(response => {
                                if (response.data.result) {
                                    console.log('response.data.result',response.data.result)
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.goParent();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },

                goBack() {
                    history.go(-1)
                },
                openUpload(str) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,images,images_url) {
                    this.form[name] = images_url;
                },
                clearImg(str,type,index) {
                    if(!type) {
                        this.form[str] = "";
                        this.form[str+'_url'] = "";
                    }
                    else {
                        this.form[str].splice(index,1);
                        this.form[str+'_url'].splice(index,1);
                    }
                    this.$forceUpdate();
                },
                openListUpload(str) {
                    this.chooseImgListName = str;
                    this.uploadListShow = true;
                },
                changeListProp(val) {
                    if(val == true) {
                        this.uploadListShow = false;
                    }
                    else {
                        this.uploadListShow = true;
                    }
                },
                sureImgList(name,images,images_url) {
                    console.log(name)
                    console.log(images)
                    console.log(images_url)
                    if(!this.form[name] || !this.form[name+'_url']) {
                        this.form[name] = [];
                        this.form[name+'_url'] = [];
                    }
                    images.forEach((item,index) => {
                        this.form[name].push(item);
                        this.form[name+'_url'].push(images_url[index]);
                    })
                    console.log(this.form)
                },

                addChannel() {
                    this.channel_list.push({
                        'name':'',
                        'url':''
                    });
                },
                delChannel(index) {
                    this.channel_list.splice(index,1);
                },
                addProperty() {
                    this.property_list.push({
                        'name':'',
                        'value':''
                    });
                },
                delProperty(index) {
                    this.property_list.splice(index,1);
                },
            },
        })

    </script>
@endsection
